<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>图书后台管理系统</title>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .calendar-day {
                aspect-ratio: 1/1;
            }
            .weather-card {
                background: linear-gradient(135deg, #1a73e8 0%, #4285f4 100%);
            }
            .weather-icon {
                width: 64px;
                height: 64px;
                display: flex;
                align-items: center;
                justify-content: center;
            }
            .fa-sun {
                color: #ffc107;
                animation: sun-rotate 15s linear infinite;
            }
            .fa-cloud {
                color: #f8f9fa;
                animation: cloud-float 8s ease-in-out infinite;
            }
            .fa-cloud-rain {
                color: #adb5bd;
                animation: cloud-float 10s ease-in-out infinite;
            }
            .fa-wind {
                color: #6c757d;
                animation: wind-blow 3s ease-in-out infinite;
            }
            .fa-tint {
                color: #0dcaf0;
                animation: rain-fall 1s linear infinite;
                position: absolute;
            }
            .fa-tint:nth-child(1) {
                left: 25%;
                animation-delay: 0.2s;
            }
            .fa-tint:nth-child(2) {
                left: 50%;
                animation-delay: 0.5s;
            }
            .fa-tint:nth-child(3) {
                left: 75%;
                animation-delay: 0.8s;
            }
            @keyframes sun-rotate {
                from { transform: rotate(0deg); }
                to { transform: rotate(360deg); }
            }
            @keyframes cloud-float {
                0%, 100% { transform: translateX(0); }
                50% { transform: translateX(10px); }
            }
            @keyframes wind-blow {
                0%, 100% { transform: scale(1); }
                50% { transform: scale(1.1); }
            }
            @keyframes rain-fall {
                0% { transform: translateY(-10px); opacity: 0; }
                50% { opacity: 1; }
                100% { transform: translateY(20px); opacity: 0; }
            }
        }
    </style>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#1a73e8',
                        success: '#4CAF50',
                        danger: '#ff4444',
                        neutral: {
                            100: '#f5f5f5',
                            200: '#e5e5e5',
                            300: '#d4d4d4',
                            400: '#a3a3a3',
                            500: '#737373',
                            600: '#525252',
                            700: '#404040',
                            800: '#262626',
                            900: '#171717',
                        }
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
</head>
<body class="bg-gray-50 min-h-screen">
    <div class="max-w-7xl mx-auto p-6">
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
            <!-- 添加图书表单 - 左侧 -->
            <div class="lg:col-span-2">
                <div class="bg-white p-6 rounded-lg shadow-md h-full">
                    <h2 class="text-xl font-semibold mb-4 flex items-center">
                        <i class="fa fa-book text-primary mr-2"></i> 添加图书
                    </h2>
                    <form id="bookForm" method="post" action="insert_book_check.php" enctype="multipart/form-data">
                        <div class="mb-4">
                            <label for="book_name" class="block text-sm font-medium text-gray-700 mb-1">图书名称:</label>
                            <input type="text" id="book_name" name="book_name" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 shadow-sm" required>
                        </div>

                        <div class="mb-4">
                            <label for="book_img" class="block text-sm font-medium text-gray-700 mb-1">封面图片:</label>
                            <div class="relative">
                                <input type="file" id="book_img" name="book_img" accept="image/*" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm">
                                <div id="imgPreview" class="mt-2 hidden">
                                    <img id="previewImg" src="" alt="预览图" class="max-h-32 rounded-md shadow">
                                </div>
                            </div>
                        </div>

                        <div class="mb-4">
                            <label for="author" class="block text-sm font-medium text-gray-700 mb-1">作者:</label>
                            <input type="text" id="author" name="author" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 shadow-sm" required>
                        </div>

                        <div class="mb-4">
                            <label for="brief" class="block text-sm font-medium text-gray-700 mb-1">图书简介 (不超过50字):</label>
                            <textarea id="brief" name="brief" rows="4" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 shadow-sm" required></textarea>
                            <div class="text-xs text-gray-500 mt-1"><span id="charCount">0</span>/50</div>
                        </div>

                        <div class="flex justify-end">
                            <button type="reset" class="mr-3 px-4 py-2 border border-gray-300 rounded-md hover:bg-gray-50 transition-colors shadow-sm">
                                <i class="fa fa-times mr-1"></i> 重置
                            </button>
                            <button type="submit" class="bg-primary hover:bg-primary/90 text-white px-4 py-2 rounded-md transition-all duration-300 shadow-md">
                                <i class="fa fa-save mr-1"></i> 保存图书
                            </button>
                        </div>
                    </form>
                </div>
            </div>

            <!-- 日历和天气 - 右侧 -->
            <div class="lg:col-span-1 space-y-6">
                <!-- 天气卡片 -->
                <div class="bg-white rounded-lg shadow-md overflow-hidden">
                    <div class="weather-card text-white p-5 relative">
                        <div class="absolute top-0 right-0 w-24 h-24 opacity-20">
                            <div class="weather-icon">
                                <i class="fa fa-cloud text-5xl fa-cloud animate-cloud-float"></i>
                            </div>
                        </div>
                        <div class="flex justify-between items-start">
                            <div>
                                <h3 class="text-xl font-semibold mb-1">泉州南安市</h3>
                                <p class="text-white/80 text-sm" id="weather-date">2025年5月29日 星期四</p>
                            </div>
                            <div class="text-right">
                                <i class="fa fa-map-marker text-white/80"></i>
                            </div>
                        </div>
                        <div class="flex items-center justify-center mt-6">
                            <div class="text-center">
                                <div class="weather-icon mx-auto mb-2">
                                    <i class="fa fa-cloud text-5xl animate-cloud-float"></i>
                                </div>
                                <div class="text-4xl font-bold mb-1" id="weather-temp">26°C</div>
                                <div class="text-lg mb-1" id="weather-desc">多云</div>
                                <div class="text-sm text-white/80" id="weather-wind">微风</div>
                            </div>
                        </div>
                        <div class="mt-4 text-center">
                            <a href="http://www.weather.com.cn/" target="_blank" class="text-white/90 text-sm hover:text-white transition-colors flex items-center justify-center">
                                <i class="fa fa-external-link mr-1"></i> 查看更多天气信息
                            </a>
                        </div>
                    </div>
                    <div class="p-4">
                        <div class="grid grid-cols-4 gap-2 text-center">
                            <div class="p-2 rounded-md bg-blue-50 hover:bg-blue-100 transition-colors cursor-pointer weather-day" data-weather="sunny" data-temp="24~32°C">
                                <p class="text-xs text-gray-500">周五</p>
                                <div class="weather-icon mx-auto my-1">
                                    <i class="fa fa-sun text-3xl animate-sun-rotate"></i>
                                </div>
                                <p class="text-sm font-medium">24~32°C</p>
                            </div>
                            <div class="p-2 rounded-md bg-blue-50 hover:bg-blue-100 transition-colors cursor-pointer weather-day" data-weather="cloudy" data-temp="23~30°C">
                                <p class="text-xs text-gray-500">周六</p>
                                <div class="weather-icon mx-auto my-1">
                                    <i class="fa fa-cloud text-3xl animate-cloud-float"></i>
                                </div>
                                <p class="text-sm font-medium">23~30°C</p>
                            </div>
                            <div class="p-2 rounded-md bg-blue-50 hover:bg-blue-100 transition-colors cursor-pointer weather-day" data-weather="cloudy" data-temp="22~29°C">
                                <p class="text-xs text-gray-500">周日</p>
                                <div class="weather-icon mx-auto my-1">
                                    <i class="fa fa-cloud text-3xl animate-cloud-float"></i>
                                </div>
                                <p class="text-sm font-medium">22~29°C</p>
                            </div>
                            <div class="p-2 rounded-md bg-blue-50 hover:bg-blue-100 transition-colors cursor-pointer weather-day" data-weather="rainy" data-temp="21~27°C">
                                <p class="text-xs text-gray-500">周一</p>
                                <div class="weather-icon mx-auto my-1 relative">
                                    <i class="fa fa-cloud-rain text-3xl animate-cloud-float"></i>
                                    <i class="fa fa-tint text-lg"></i>
                                    <i class="fa fa-tint text-lg"></i>
                                    <i class="fa fa-tint text-lg"></i>
                                </div>
                                <p class="text-sm font-medium">21~27°C</p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 日历组件 -->
                <div class="bg-white rounded-lg shadow-md p-5">
                    <div class="flex justify-between items-center mb-4">
                        <h3 class="text-lg font-semibold" id="calendar-month">2025年5月</h3>
                        <div class="flex space-x-2">
                            <button id="prev-month" class="p-1 rounded-full hover:bg-gray-100 transition-colors">
                                <i class="fa fa-chevron-left text-gray-600"></i>
                            </button>
                            <button id="next-month" class="p-1 rounded-full hover:bg-gray-100 transition-colors">
                                <i class="fa fa-chevron-right text-gray-600"></i>
                            </button>
                        </div>
                    </div>
                    
                    <div class="grid grid-cols-7 gap-1 mb-2">
                        <div class="text-center text-xs text-gray-500 py-1">日</div>
                        <div class="text-center text-xs text-gray-500 py-1">一</div>
                        <div class="text-center text-xs text-gray-500 py-1">二</div>
                        <div class="text-center text-xs text-gray-500 py-1">三</div>
                        <div class="text-center text-xs text-gray-500 py-1">四</div>
                        <div class="text-center text-xs text-gray-500 py-1">五</div>
                        <div class="text-center text-xs text-gray-500 py-1">六</div>
                    </div>
                    
                    <div id="calendar-days" class="grid grid-cols-7 gap-1">
                        <!-- 日历日期将通过JavaScript动态生成 -->
                    </div>
                    
                    <div class="mt-4 pt-4 border-t border-gray-100">
                        <h4 class="font-medium mb-2">图书添加记录</h4>
                        <div id="book-records" class="space-y-2 max-h-40 overflow-y-auto">
                            <div class="flex items-center p-2 bg-blue-50 rounded-md">
                                <div class="w-2 h-2 bg-blue-500 rounded-full mr-2"></div>
                                <span class="text-sm">《PHP编程实战》 - 2025-05-29 10:30</span>
                            </div>
                            <div class="flex items-center p-2 bg-green-50 rounded-md">
                                <div class="w-2 h-2 bg-green-500 rounded-full mr-2"></div>
                                <span class="text-sm">《JavaScript高级教程》 - 2025-05-28 14:15</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 通知隐藏 -->
    <div id="notification" class="fixed top-4 right-4 bg-white rounded-lg shadow-lg p-4 transform transition-all duration-300 translate-x-full opacity-0 flex items-center max-w-sm z-50">
        <div id="notifyIcon" class="mr-3 text-xl"></div>
        <div>
            <h4 id="notifyTitle" class="font-medium text-gray-900"></h4>
            <p id="notifyMessage" class="text-sm text-gray-600"></p>
        </div>
        <button id="closeNotify" class="ml-4 text-gray-400 hover:text-gray-600">
            <i class="fa fa-times"></i>
        </button>
    </div>

    <script>
        // 全局变量
        let currentDate = new Date();
        let currentMonth = currentDate.getMonth();
        let currentYear = currentDate.getFullYear();
        
        document.addEventListener('DOMContentLoaded', () => {
            // 更新日期显示
            updateDateTime();
            
            // 生成日历
            generateCalendar(currentYear, currentMonth);
            
            // 由于浏览器安全限制，无法直接获取实时天气数据
            // 这里使用模拟数据，实际应用中需要通过天气API获取
            fetchWeatherData();
            
            // 天气日点击事件
            document.querySelectorAll('.weather-day').forEach(day => {
                day.addEventListener('click', () => {
                    const weather = day.getAttribute('data-weather');
                    const temp = day.getAttribute('data-temp');
                    
                    // 更新主天气显示
                    document.getElementById('weather-temp').textContent = temp.split('~')[1];
                    document.getElementById('weather-desc').textContent = getWeatherDescription(weather);
                    
                    // 更新天气图标
                    updateWeatherIcon(weather);
                    
                    // 跳转到中国气象网
                    window.open('http://www.weather.com.cn/', '_blank');
                });
            });
            
            // 日历月份切换
            document.getElementById('prev-month').addEventListener('click', () => {
                currentMonth--;
                if (currentMonth < 0) {
                    currentMonth = 11;
                    currentYear--;
                }
                generateCalendar(currentYear, currentMonth);
            });
            
            document.getElementById('next-month').addEventListener('click', () => {
                currentMonth++;
                if (currentMonth > 11) {
                    currentMonth = 0;
                    currentYear++;
                }
                generateCalendar(currentYear, currentMonth);
            });
            
            // 其余原有的JavaScript代码保持不变
            const bookForm = document.getElementById('bookForm');
            const charCount = document.getElementById('charCount');
            const briefTextarea = document.getElementById('brief');
            const bookImg = document.getElementById('book_img');
            const imgPreview = document.getElementById('imgPreview');
            const previewImg = document.getElementById('previewImg');
            const notification = document.getElementById('notification');
            const notifyIcon = document.getElementById('notifyIcon');
            const notifyTitle = document.getElementById('notifyTitle');
            const notifyMessage = document.getElementById('notifyMessage');
            const closeNotify = document.getElementById('closeNotify');
            
            briefTextarea.addEventListener('input', () => {
                const count = briefTextarea.value.length;
                charCount.textContent = count;
                
                if (count > 250) {
                    charCount.classList.add('text-red-500');
                    briefTextarea.value = briefTextarea.value.substring(0, 250);
                    charCount.textContent = 250;
                } else {
                    charCount.classList.remove('text-red-500');
                }
            });
            
            bookImg.addEventListener('change', (e) => {
                if (e.target.files && e.target.files[0]) {
                    const reader = new FileReader();
                    
                    reader.onload = function(e) {
                        previewImg.src = e.target.result;
                        imgPreview.classList.remove('hidden');
                    }
                    
                    reader.readAsDataURL(e.target.files[0]);
                } else {
                    imgPreview.classList.add('hidden');
                }
            });
            
            bookForm.addEventListener('submit', async (e) => {
                e.preventDefault();
                
                const formData = new FormData(bookForm);
                
                try {
                    showLoading(true);
                    
                    const response = await fetch('insert_book_check.php', {
                        method: 'POST',
                        body: formData
                    });
                    
                    const result = await response.text();
                    
                    if (result.includes('成功')) {
                        showNotification('success', '添加成功', '图书已成功添加到系统中');
                        
                        // 添加图书记录
                        addBookRecord();
                        
                        bookForm.reset();
                        imgPreview.classList.add('hidden');
                    } else {
                        showNotification('error', '添加失败', result || '添加图书时发生错误');
                    }
                } catch (error) {
                    console.error('Error submitting form:', error);
                    showNotification('error', '网络错误', '提交表单时发生网络错误');
                } finally {
                    showLoading(false);
                }
            });
            
            function showNotification(type, title, message) {
                notifyTitle.textContent = title;
                notifyMessage.textContent = message;
                if (type === 'success') {
                    notifyIcon.className = 'fa fa-check-circle text-green-500';
                    notification.classList.add('border-l-4', 'border-green-500');
                } else if (type === 'error') {
                    notifyIcon.className = 'fa fa-times-circle text-red-500';
                    notification.classList.add('border-l-4', 'border-red-500');
                } else if (type === 'warning') {
                    notifyIcon.className = 'fa fa-exclamation-triangle text-yellow-500';
                    notification.classList.add('border-l-4', 'border-yellow-500');
                } else {
                    notifyIcon.className = 'fa fa-info-circle text-blue-500';
                    notification.classList.add('border-l-4', 'border-blue-500');
                }
                
                notification.classList.remove('translate-x-full', 'opacity-0');
                notification.classList.add('translate-x-0', 'opacity-100');
                
                const timeout = setTimeout(() => {
                    hideNotification();
                }, 5000);
                
                closeNotify.addEventListener('click', () => {
                    clearTimeout(timeout);
                    hideNotification();
                });
            }
            
            function hideNotification() {
                notification.classList.remove('translate-x-0', 'opacity-100');
                notification.classList.add('translate-x-full', 'opacity-0');
                
                setTimeout(() => {
                    notification.className = 'fixed top-4 right-4 bg-white rounded-lg shadow-lg p-4 transform transition-all duration-300 translate-x-full opacity-0 flex items-center max-w-sm z-50';
                }, 300);
            }
            
            function showLoading(isLoading) {
                const loader = document.getElementById('pageLoader');
                
                if (isLoading) {
                    if (!loader) {
                        const loaderHtml = `
                            <div id="pageLoader" class="fixed inset-0 bg-black bg-opacity-20 flex items-center justify-center z-50">
                                <div class="bg-white p-4 rounded-lg flex items-center">
                                    <i class="fa fa-spinner fa-spin text-primary mr-2"></i>
                                    <span>处理中...</span>
                                </div>
                            </div>
                        `;
                        document.body.insertAdjacentHTML('beforeend', loaderHtml);
                    }
                } else {
                    if (loader) {
                        document.body.removeChild(loader);
                    }
                }
            }
        });
        
        // 更新日期时间显示
        function updateDateTime() {
            const now = new Date();
            const year = now.getFullYear();
            const month = now.getMonth() + 1;
            const date = now.getDate();
            const days = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
            const day = days[now.getDay()];
            
            document.getElementById('weather-date').textContent = 
                `${year}年${month}月${date}日 ${day}`;
        }
        
        // 获取天气描述
        function getWeatherDescription(weather) {
            const descriptions = {
                'sunny': '晴',
                'cloudy': '多云',
                'rainy': '雨',
                'windy': '有风'
            };
            return descriptions[weather] || '未知';
        }
        
        // 模拟获取天气数据
        function fetchWeatherData() {
            // 模拟天气数据
            const weatherData = {
                temperature: 26,
                description: '多云',
                wind: '微风'
            };
            
            document.getElementById('weather-temp').textContent = `${weatherData.temperature}°C`;
            document.getElementById('weather-desc').textContent = weatherData.description;
            document.getElementById('weather-wind').textContent = weatherData.wind;
        }
        
        // 更新天气图标
        function updateWeatherIcon(weather) {
            const mainIcon = document.querySelector('.weather-card .weather-icon');
            mainIcon.innerHTML = '';
            
            if (weather === 'sunny') {
                mainIcon.innerHTML = '<i class="fa fa-sun text-5xl animate-sun-rotate"></i>';
            } else if (weather === 'cloudy') {
                mainIcon.innerHTML = '<i class="fa fa-cloud text-5xl animate-cloud-float"></i>';
            } else if (weather === 'rainy') {
                mainIcon.innerHTML = `
                    <div class="relative">
                        <i class="fa fa-cloud-rain text-5xl animate-cloud-float"></i>
                        <i class="fa fa-tint text-xl"></i>
                        <i class="fa fa-tint text-xl"></i>
                        <i class="fa fa-tint text-xl"></i>
                    </div>
                `;
            } else if (weather === 'windy') {
                mainIcon.innerHTML = '<i class="fa fa-wind text-5xl animate-wind-blow"></i>';
            }
        }
        
        // 生成日历
        function generateCalendar(year, month) {
            const calendarDays = document.getElementById('calendar-days');
            const calendarMonth = document.getElementById('calendar-month');
            
            // 更新月份显示
            calendarMonth.textContent = `${year}年${month + 1}月`;
            
            // 清空日历
            calendarDays.innerHTML = '';
            
            // 获取当月第一天是星期几
            const firstDay = new Date(year, month, 1).getDay();
            
            // 获取当月有多少天
            const daysInMonth = new Date(year, month + 1, 0).getDate();
            
            // 添加上个月的占位日期
            for (let i = 0; i < firstDay; i++) {
                const prevMonthDay = new Date(year, month, 0).getDate() - firstDay + i + 1;
                const dayElement = document.createElement('div');
                dayElement.className = 'text-center text-gray-400 py-2 calendar-day';
                dayElement.textContent = prevMonthDay;
                calendarDays.appendChild(dayElement);
            }
            
            // 添加当月日期
            const today = new Date();
            const isCurrentMonth = today.getFullYear() === year && today.getMonth() === month;
            
            for (let i = 1; i <= daysInMonth; i++) {
                const dayElement = document.createElement('div');
                dayElement.className = 'text-center py-2 calendar-day hover:bg-gray-100 rounded-full transition-colors cursor-pointer';
                dayElement.textContent = i;
                
                // 高亮今天的日期
                if (isCurrentMonth && today.getDate() === i) {
                    dayElement.className = 'text-center py-2 bg-primary text-white rounded-full font-medium calendar-day';
                }
                
                // 添加点击事件
                dayElement.addEventListener('click', () => {
                    selectDate(year, month, i);
                });
                
                calendarDays.appendChild(dayElement);
            }
            
            // 添加下个月的占位日期
            const remainingDays = 42 - (firstDay + daysInMonth);
            if (remainingDays < 7) {
                for (let i = 1; i <= remainingDays; i++) {
                    const dayElement = document.createElement('div');
                    dayElement.className = 'text-center text-gray-400 py-2 calendar-day';
                    dayElement.textContent = i;
                    calendarDays.appendChild(dayElement);
                }
            }
        }
        
        // 选择日期
        function selectDate(year, month, day) {
            // 更新日期显示
            document.getElementById('weather-date').textContent = 
                `${year}年${month + 1}月${day}日 ${getDayOfWeek(year, month, day)}`;
            
            // 移除之前的选中状态
            document.querySelectorAll('#calendar-days div').forEach(el => {
                if (el.classList.contains('bg-primary')) {
                    el.classList.remove('bg-primary', 'text-white', 'font-medium');
                    el.classList.add('hover:bg-gray-100');
                }
            });
            
            // 设置新的选中状态
            const selectedDay = Array.from(calendarDays.children).find(el => 
                el.textContent === String(day) && !el.classList.contains('text-gray-400')
            );
            
            if (selectedDay) {
                selectedDay.classList.remove('hover:bg-gray-100');
                selectedDay.classList.add('bg-primary', 'text-white', 'font-medium');
            }
        }
        
        // 获取星期几
        function getDayOfWeek(year, month, day) {
            const days = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
            return days[new Date(year, month, day).getDay()];
        }
        
        // 添加图书记录
        function addBookRecord() {
            const bookName = document.getElementById('book_name').value;
            const now = new Date();
            const recordDate = now.toISOString().split('T')[0];
            const recordTime = now.toTimeString().split(' ')[0];
            
            const recordsContainer = document.getElementById('book-records');
            const recordElement = document.createElement('div');
            recordElement.className = 'flex items-center p-2 bg-blue-50 rounded-md animate-fadeIn';
            recordElement.innerHTML = `
                <div class="w-2 h-2 bg-blue-500 rounded-full mr-2"></div>
                <span class="text-sm">《${bookName}》 - ${recordDate} ${recordTime}</span>
            `;
            
            // 添加到容器顶部
            if (recordsContainer.firstChild) {
                recordsContainer.insertBefore(recordElement, recordsContainer.firstChild);
            } else {
                recordsContainer.appendChild(recordElement);
            }
            
            // 添加入场动画
            setTimeout(() => {
                recordElement.classList.add('opacity-100');
            }, 10);
        }
    </script>
</body>
</html>